/*********
1.Global Styles
*********/
html, body {
    height: 100%;
}

body {
    color: #141414;
    background: #fff;
    font-family: 'Roboto Condensed', sans-serif;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    font-family: 'Roboto Condensed', sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Roboto Condensed', sans-serif;
}

.text-bold {
    font-weight: 700
}

.text-big {
    font-size: 18px
}

.text-bigger {
    font-size: 34px
}

.text-danger {
    color: #6C7A89;
}

.lead-sm {
    font-size: 18px
}

hr.border {
    border: 1px #6C7A89;
}

hr.border-light {
    border: 1px #6C7A89;
}

hr.border-sm {
    width: 50px;
    border: 3px #282828;
}

hr.border-thick {
    margin: 50px auto;
    border: 3px #eee;
}

a {
    color: #141414;
    text-decoration: none;
}

a:hover, a:focus {
    color: #6C7A89;
    text-decoration: none;
}

/* ========== Colors ========== */
.white {
    color: #FFF
}

.accent {
    color: #6C7A89
}

/* ========== Backgrounds ========== */
.white-bg {
    background: rgba(255, 255, 255, 1)
}

.dark-bg {
    background: rgba(20, 20, 20, 0.8)
}

.black-bg {
    background: rgba(20, 20, 20, 1)
}

.accent-bg {
    background: #6C7A89
}

.gray-bg {
    background: #ececec;
}

/* ========== Layout Adjustments ========== */
.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0
}

.no-gutter {
    padding-right: 0;
    padding-left: 0
}

.no-padding {
    padding: 0
}

/* ========== Anchor ========== */
.anchor {
    display: block;
    height: 115px; /*same height as header*/
    margin-top: -115px; /*same height as header*/
    visibility: hidden;
}

/* ========== Form Adjustments for Launch Page ========== */


.outer-wrap {
    height: 500px;
}


/*********
4.Common styles for Sections
*********/
section {
    padding: 75px 0
}

section h1 {
    text-transform: uppercase;
    font-size: 46px;
    font-weight: 400;
    margin-top: 0;
}

section h2 {
    text-transform: uppercase;
    font-size: 38px;
    font-weight: 400;
    margin-top: 0;
}

section .section-title, section .section-title-color, section .section-title-white {
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    section h2 {
        text-transform: uppercase;
        font-size: 21px;
        font-weight: 400;
        margin-top: 0;
    }
}

/* ========== Section Title Black ========== */
.section-title h2 {
    margin-top: 20px !important;
    text-align: center;
    overflow: hidden;
    font-size: 30px;
}

.section-title h2 span {
    position: relative;
}

.section-title h2 span::before, .section-title h2 span::after {
    position: absolute;
    content: '';
    height: 1px;
    background: rgba(20, 20, 20, 0.1);
    top: 16px;
    width: 1000px;
    right: 100%;
    margin-right: 20px;
}

.section-title h2 span::after {
    left: 100%;
    margin-left: 20px;
}

/* ========== Section Title White ========== */
.section-title-white h2 {
    margin-top: 20px !important;
    text-align: center;
    overflow: hidden;
    font-size: 30px;
}

.section-title-white h2 span {
    position: relative;
    color: #FFF
}

.section-title-white h2 span::before, .section-title-white h2 span::after {
    position: absolute;
    content: '';
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    top: 16px;
    width: 1000px;
    right: 100%;
    margin-right: 20px;
}

.section-title-white h2 span::after {
    left: 100%;
    margin-left: 20px;
}

section .subtitle {
    font-size: 18px;
    font-weight: 400
}


/*********
6.Section Videos
*********/
section#videos {
    background: #EFEFEF
}

section#videos .video-item {
    margin: 15px 0;
}

section#videos .video-item figure {
    margin: 0 0 15px;
}

h3.talktitle {
    font-size: 21px;
    text-transform: uppercase;
    font-weight: 400
}

@media (max-width: 768px) {
    h3.talktitle {
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 400;
    }
}

/* ========== Video Items ========== */
figure.video-thumb {
    color: #fff;
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    background: #000;
    text-align: center;
    margin-bottom: 20px
}

figure.video-thumb * {
    -webkit-box-sizing: padding-box;
    box-sizing: padding-box;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out
}

figure.video-thumb img {
    opacity: 1;
    width: 100%
}

figure.video-thumb figcaption {
    top: 50%;
    left: 40px;
    right: 40px;
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

figure.video-thumb figcaption p.accent {
    position: relative;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    -webkit-transform: translateY(75%);
    transform: translateY(75%)
}

figure.video-thumb figcaption h2 span {
    font-weight: 800
}

figure.video-thumb figcaption p {
    font-size: 1em;
    font-weight: 500;
    opacity: 0;
    margin: 0
}

figure.video-thumb:before, figure.video-thumb:after {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.6s, -webkit-transform .6s;
    transition: opacity 0.6s, -webkit-transform 0.6s, -moz-transform 0.6s, -o-transform 0.6s, transform .6s
}

figure.video-thumb:before {
    border-top: 1px double #fff;
    border-bottom: 1px double #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1)
}

figure.video-thumb:after {
    border-right: 1px double #fff;
    border-left: 1px double #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0)
}

figure.video-thumb a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1
}

figure.video-thumb.blue {
    background: #0a212f
}

figure.video-thumb.red {
    background: #36100c
}

figure.video-thumb.yellow {
    background: #562e0a
}

figure.video-thumb:hover img, figure.video-thumb.hover img {
    opacity: .2;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

figure.video-thumb:hover figcaption h2, figure.video-thumb.hover figcaption h2, figure.video-thumb:hover figcaption p, figure.video-thumb.hover figcaption p {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

figure.video-thumb:hover figcaption p, figure.video-thumb.hover figcaption p {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

figure.video-thumb:hover:before, figure.video-thumb.hover:before, figure.video-thumb:hover:after, figure.video-thumbsep.hover:after {
    opacity: .8;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.video-title {
    text-transform: uppercase;
    color: #6C7A89;
}


/*********
7.Section Thrive
*********/


.dark-box {
    background: rgba(20, 20, 20, 0.7);
    color: #FFF;
    outline: solid #FFF 1px;
    outline-offset: -20px;
    margin-bottom: 40px
}



/* ========== Ribbon ========== */
/* Coloured Ribbon */
.ribbon-wrapper-light {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 9px;
    z-index: 9
}

.ribbon-light {
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 4px 0;
    right: 26px;
    top: 20px;
    font-size: 13px;
    width: 120px;
    background-color: #6C7A89;
    color: #fff;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    text-transform: uppercase
}

.ribbon-light:before, .ribbon-light:after {
    content: "";
    border-top: 4px solid #5b0818;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    bottom: -3px
}

.ribbon-light:before {
    left: 0
}

.ribbon-light:after {
    right: 0
}

@media (max-width: 640px) {
    .ribbon-wrapper-light {
        width: 90px;
        height: 90px;
        overflow: hidden;
        position: absolute;
        top: -5px;
        left: 9px;
        z-index: 9
    }
}

/* Dark Ribbon */
.ribbon-wrapper-dark {
    width: 90px;
    height: 90px;
    overflow: hidden;
    position: absolute;
    top: 15px;
    left: 9px;
    z-index: 9
}

.ribbon-dark {
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 4px 0;
    right: 26px;
    top: 20px;
    font-size: 13px;
    width: 120px;
    background-color: #141414;
    color: #6C7A89;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    text-transform: uppercase
}

.ribbon-dark:before, .ribbon-dark:after {
    content: "";
    border-top: 4px solid #000;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    position: absolute;
    bottom: -3px
}

.ribbon-dark:before {
    left: 0
}

.ribbon-dark:after {
    right: 0
}

@media (max-width: 640px) {
    .ribbon-wrapper-dark {
        width: 90px;
        height: 90px;
        overflow: hidden;
        position: absolute;
        top: -5px;
        left: 9px;
        z-index: 9
    }
}

/*********
10.Section Sponsors
*********/
section#sponsors {
    background: #EFEFEF
}

/*********
11.Section Newsletter
*********/
section#getstarted {
    background: #141414 url(/Content/images/header-hero01.jpg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

section#getstarted .form-group {
    margin-bottom: 0px;
    color: #141414;
    vertical-align: top
}

section#getstarted .form-group input.form-control {
    height: 42px;
    background-color: rgba(250, 250, 250, 0.9);
    color: #141414;
}

section#getstarted .form-control {
    border-radius: 0;
    border: 1px solid #fff;
}

section#getstarted .form-group textarea.form-control {
    background-color: rgba(28, 30, 30, 0.1);
    color: #141414;
}

section#getstarted .form-control:focus {
    border-color: #6C7A89;
    box-shadow: none;
    border: 1px solid #6C7A89;
}

section#getstarted::-webkit-input-placeholder {
    text-transform: uppercase;
    font-weight: 700;
    color: #bbb;
}

section#getstarted:-moz-placeholder {
    text-transform: uppercase;
    font-weight: 700;
    color: #bbb;
}

section#getstarted::-moz-placeholder {
    text-transform: uppercase;
    font-weight: 700;
    color: #bbb;
}

section#getstarted:-ms-input-placeholder {
    text-transform: uppercase;
    font-weight: 700;
    color: #bbb;
}

section#getstarted .text-danger {
    color: #6C7A89;
}



/*********
15.Buttons
*********/
.btn {
    font-family: 'Roboto Condensed', sans-serif;
}

/* ========== Button Main Color ========== */
.btn-main-color {
    color: #fff;
    background-color: #6C7A89;
    border-color: #6C7A89;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 25px;
}

.btn-main-color:focus, .btn-main-color.focus {
    color: #fff;
    background-color: #6C7A89;
    border-color: #6C7A89
}

.btn-main-color:hover {
    color: #6C7A89;
    background-color: #FFF;
    border-color: #FFF
}

/* ========== Button Main Ghost ========== */
.btn-main-ghost {
    color: #6C7A89;
    background-color: transparent;
    border-color: #6C7A89;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 25px;
}

.btn-main-ghost:focus, .btn-main-ghost.focus {
    color: #fff;
    background-color: #6C7A89;
    border-color: #6C7A89
}

.btn-main-ghost:hover {
    color: #FFF;
    background-color: #6C7A89;
    border-color: #6C7A89
}



/* ========== Button Main Ghost ========== */
.btn-main-orange {
    color: #FFF;
    background-color: #fd821c;
    border-color: #cf640b;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 25px;
}

.btn-main-orange:focus,
.btn-main-orange.focus,
.btn-main-orange:hover {
    background-color: #cf640b;
}



/*********
Facebook Feed Items
*********/
.feed-item-container {
    margin-top: 15px;
    margin-bottom: 15px;
}
.feed-item {
    color: #141414;
    overflow: hidden;
    width: 100%;
    background-color: #ebebeb;
    text-align: left;
    font-size: 16px
}

.feed-item * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.feed-item .image {
    overflow: hidden;
    cursor: pointer
}

.feed-item img {
    max-width: 100%;
    vertical-align: top;
    position: relative
}

.feed-item .details {
    padding: 20px 20px 0;
    position: relative;
}

.feed-item .date {
    background-color: #6C7A89;
    top: 0;
    color: #fff;
    left: 0;
    height: 50px;
    width: 50px;
    position: relative;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    z-index: 1;
    margin-bottom: -50px
}

.feed-item .date span {
    display: block;
    line-height: 24px
}

.feed-item .date .month {
    font-size: 14px
}

.feed-item h3, .feed-item p {
    margin: 0;
    padding: 0
}

.feed-item h3 {
    margin-bottom: 10px;
    display: inline-block;
    font-weight: 500;
    font-size: 21px;
    text-transform: uppercase
}

.feed-item p {
    font-size: .8em;
    margin-bottom: 20px;
    line-height: 1.6em
}

.feed-item footer {
    padding: 0;
    background-color: rgba(33, 33, 33, 1);
    color: #e6e6e6;
    font-size: .8em;
    line-height: 30px
}

.feed-item footer > div {
    display: inline-block;
    margin-left: 10px
}

.feed-item footer a,
.feed-item footer a i{
    color: #6C7A89;
    margin-right: 5px
}

.feed-item footer a:hover,
.feed-item footer a:hover i{
    color: #FFFFFF;
}

.feed-item :hover img, .feed-item .hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

/*********
22.Paddings
*********/
.pddn-neg-10-top {
    padding-top: -10px
}

.pddn-0 {
    padding: 0px !important
}

.pddn-10 {
    padding: 10px
}

.pddn-20 {
    padding: 20px
}

.pddn-30 {
    padding: 30px
}

.pddn-40 {
    padding: 40px
}

.pddn-50 {
    padding: 50px
}

.pddn-60 {
    padding: 60px
}

.pddn-10-top {
    padding-top: 10px
}

.pddn-20-top {
    padding-top: 20px
}

.pddn-30-top {
    padding-top: 30px
}

.pddn-40-top {
    padding-top: 40px
}

.pddn-50-top {
    padding-top: 50px
}

.pddn-60-top {
    padding-top: 60px
}

.pddn-10-btm {
    padding-bottom: 10px
}

.pddn-20-btm {
    padding-bottom: 20px
}

.pddn-30-btm {
    padding-bottom: 30px
}

.pddn-40-btm {
    padding-bottom: 40px
}

.pddn-50-btm {
    padding-bottom: 50px
}

.pddn-60-btm {
    padding-bottom: 60px
}

.pddn-0-top-btm {
    padding: 0
}

.pddn-10-top-btm {
    padding: 10px 0
}

.pddn-20-top-btm {
    padding: 20px 0
}

.pddn-30-top-btm {
    padding: 30px 0
}

.pddn-40-top-btm {
    padding: 40px 0
}

.pddn-50-top-btm {
    padding: 50px 0
}

.pddn-60-top-btm {
    padding: 60px 0
}

.pdd-section-portfolio {
    padding: 50px 0 20px 0
}

.pdd-section-portfolio-top {
    padding: 50px 0 0 0
}

/*********
23.Margins
*********/
.mrgn-10-top {
    margin-top: 10px
}

.mrgn-15-top {
    margin-top: 15px
}

.mrgn-20-top {
    margin-top: 20px
}

.mrgn-30-top {
    margin-top: 30px
}

.mrgn-40-top {
    margin-top: 40px
}

.mrgn-50-top {
    margin-top: 50px
}

.mrgn-60-top {
    margin-top: 60px
}

.mrgn-70-top {
    margin-top: 70px
}

.mrgn-80-top {
    margin-top: 80px
}

.mrgn-90-top {
    margin-top: 90px
}

.mrgn-100-top {
    margin-top: 100px
}

.mrgn-10-btm {
    margin-bottom: 10px
}

.mrgn-20-btm {
    margin-bottom: 20px
}

.mrgn-30-btm {
    margin-bottom: 30px
}

.mrgn-40-btm {
    margin-bottom: 40px
}

.mrgn-50-btm {
    margin-bottom: 50px
}

.mrgn-60-btm {
    margin-bottom: 60px
}

.mrgn-10-top-btm {
    margin: 10px 0
}

.mrgn-20-top-btm {
    margin: 20px 0
}

.mrgn-30-top-btm {
    margin: 30px 0
}

.mrgn-40-top-btm {
    margin: 40px 0
}

.mrgn-50-top-btm {
    margin: 50px 0
}

.mrgn-60-top-btm {
    margin: 60px 0
}